import { configureStore } from '@reduxjs/toolkit';
import apiService from "@service/index";
import credentialsReducer from '@store/slice/credentials';
import persistUserReducer from "@slice/user";
import commentsReducer from "@slice/comment";
import replyReducer from "@slice/reply";
import persistGuestChannelReducer from "@slice/guestChannel";
// slice 切片 : 1/initialState  2/同步操作  3/异步操作 createAsyncThunk + 手动axios
// 国外：全局的API状态切片: 1/不用手动配置axios 2/ 内置：取消请求 缓存 等高级操作
import newsReducer from "@slice/news";
import persistSearchKeyReducer from "@slice/searchKey";
import searchReducer from "@slice/search";
import { useDispatch, TypedUseSelectorHook, useSelector } from "react-redux";
// 合并所有的 reducer
const store = configureStore({
    devTools: process.env.NODE_ENV === "development", // 开发环境开启，生产环境关闭
    reducer: {
        [apiService.reducerPath]: apiService.reducer,
        commentsReducer,
        replyReducer: replyReducer,
        guestChannelReducer: persistGuestChannelReducer,
        newsReducer,
        searchKeyReducer: persistSearchKeyReducer,
        searchReducer, // 新增 searchReducer,
        credentialsReducer,//认证登录状态切片
        userReducer: persistUserReducer,//用户信息切片 持久化
    },
    middleware: (getDefaultMiddleware) => {
        // 加入全局 API 切片的中间件，开启内置的取消请求、缓存等高级操作 
        return getDefaultMiddleware({ serializableCheck: false }).concat(apiService.middleware);
    }
      },
    
);

export type AppDispatch = typeof store.dispatch;
export type AppState = ReturnType<typeof store.getState>;
export const useTypedDispatch = () => useDispatch<AppDispatch>();
export const useTypedSelector: TypedUseSelectorHook<AppState> = useSelector;

export default store;